<template>
  <div>
    <div>
      <el-page-header @back="back" content="溯源海报页面">
      </el-page-header>
    </div>
    <div class="interspaceH"></div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="21">数据总览</el-col>
        <el-col :span="3">
          <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
            <el-form-item>
              <el-select v-model="queryData.name" placeholder="活动标题" style="width: 200px">
                <el-option label="中秋免费送月饼" value="中秋免费送月饼"></el-option>
                <el-option label="大转盘抽奖" value="大转盘抽奖"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--数据总览-->
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-row>访问量</el-row>
            <br/>
            <el-row>
              <el-col :span="20">--</el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-row>有效线索人次</el-row>
            <br/>
            <el-row>
              <el-col :span="20">--</el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-row>中奖人数</el-row>
            <br/>
            <el-row>
              <el-col :span="20">--</el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <br/>
    </el-card>
    <div class="interspaceH"></div>

    <el-card class="box-card">
      <el-row>
        <el-col :span="14">扫码数据概览</el-col>
        <el-col :span="10">
          <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
            <el-form-item>
              <el-date-picker
                v-model="queryData.data"
                type="daterange"
                range-separator="至"
                start-placeholder="活动开始日期"
                end-placeholder="活动结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary">查询</el-button>
              <el-button size="small">重置</el-button>
              <el-button size="small" type="primary">导出  Excel</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--多选按钮-->
      <div>
        <el-form size="small" :inline="true" :model="queryData" class="demo-form-inline" label-width="100px">
          <el-form-item label="流量访问：">
            <el-checkbox-group v-model="queryData.type">
              <el-checkbox label="PV" name="pv"></el-checkbox>
            </el-checkbox-group>
          </el-form-item><br />
          <el-form-item label="转化数据：">
            <el-checkbox-group v-model="queryData.shuju">
              <el-checkbox label="有效线索" name="type1"></el-checkbox>
              <el-checkbox label="中奖人数" name="type2"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <!--折线图-->
      <div>
        <div class="tubiao" ref="chart" style="height: 500px;"></div>
      </div>
      <!--表格-->
      <div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="name"
            label="活动标题"
            width="200">
          </el-table-column>
          <el-table-column
            prop="data"
            label="活动时间"
            width="320">
          </el-table-column>
          <el-table-column
            prop="fangwen"
            label="活动首页访问PV">
          </el-table-column>
          <el-table-column
            prop="xiansuo"
            label="有效线索人数">
          </el-table-column>
          <el-table-column
            prop="zhongjiang"
            label="中奖人数">
          </el-table-column>
        </el-table>
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
export default {
  components: {
    Pagination
  },
  //折线图
  mounted() {
    this.getEchartData()
  },

  data() {
    return{
      queryData:{
        name: '大转盘抽奖',
        data: '',
        type: 'pv',
        shuju: 'type1',
      },
      tableData: [{
        name: '大转盘抽奖',
        data: '2021-10-10 至 2021-10-15',
        fangwen: '0',
        xiansuo: '0',
        zhongjiang: '0'
      }],

      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 1
      }

    }
  },
  methods:{
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 1,
        tableData: [
          {
            name: '大转盘抽奖',
            data: '2021-10-10 10:10:10 至 2021-10-15 10:10:10',
            fangwen: '0',
            xiansuo: '0',
            zhongjiang: '0'
          }
        ]
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 模拟数据结束
    },
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.formInline)
    },


    //折线图
    getEchartData() {
      const chart = this.$refs.chart
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          xAxis: {
            type: 'category',
            data: ['2021-10-10']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [0],
              type: 'line'
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener("resize", function () {
          myChart.resize()
        })
      }
      this.$on('hook:destroyed', () => {
        window.removeEventListener("resize", function () {
          myChart.resize();
        });
      })
    },
    back() {
      this.$emit("currentHandler","list")
    }
  }
}
</script>

<style scoped>
.bg-purple-dark {
  background: #cbe7f7;
  padding: 10px;
}

.grid-content {
  border-radius: 4px;
  min-height: 80px;
}


.tubiao {
  background: #fff;
}
</style>
